<template>
    <div>
        <div class="notice">
            <h4>【重要通知】:</h4>
        </div>
        <div class="btn-group">
            <Button type="success" @click="handleAddDomain">添加域名</Button>
            <Button>暂停</Button>
            <Button>启用</Button>
            <Button>删除</Button>
        </div>
        <AddDomain
                v-if="domainShow"
                v-bind:domainShow="domainShow"
                @hidden="handleHidden"
        ></AddDomain>
        <Table border ref="selection" :columns="columns4" :data="data1"
        >
            <template slot-scope="{row}" slot="name">
                <router-link to="/globalDomain/resolveList">{{ row.name }}</router-link>
            </template>
        </Table>
<!--        <Button @click="handleSelectAll(true)">Set all selected</Button>-->
<!--        <Button @click="handleSelectAll(false)">Cancel all selected</Button>-->
    </div>
</template>
<script>
    import { Table, Button } from 'view-design'
    import AddDomain from './components/AddDomain'

    export default {
        components: {
            Table,
            Button,

            AddDomain
        },
        data () {
            return {
                domainShow: false,
                columns4: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '域名',
                        // key: 'name',
                        slot: 'name'
                    }
                ],
                data1: [
                    {
                        name: 'qq.com'
                    },
                    {
                        name: 'liuchunyu.com'
                    },
                    {
                        name: 'hongfei.com'
                    },
                    {
                        name: 'qq.com.cn'
                    },
                    {
                        name: 'eet.com'
                    },
                    {
                        name: 'eet.co2m3'
                    }
                ]
            }
        },
        methods: {
            handleAddDomain () {
                this.domainShow = true
            },
            handleHidden () {
                this.domainShow = false
            }
            // handleSelectAll (status) {
            //     this.$refs.selection.selectAll(status);
            // }
        }
    }
</script>
<style scoped>
    div {
        margin-top: 20px;
    }
    .notice {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border: 1px solid rgb(143,230,177);
        background: rgb(237,255,243);
        margin: 20px 0;
    }
    .btn-group Button {
        margin-right: 10px;
    }
</style>